<template>
  <div id="search">
    <div class="buttons">
      <el-button type="primary" @click="searchPoemAndFindName" >  <!--这里把两个actions合并了，写到了一个函数-->
        <span> 搜索 </span>
      </el-button>
      <!-- <el-button type="info" @click="searchPoem">搜索</el-button> -->
    </div>
    <!--搜索栏-->
    <!-- <input type="text" v-model="searchName" placeholder="请输入古诗名" class="input_content"> -->
    <el-input
      v-model="searchName"
      style="width: 200px; height: 38px; margin-top: 1.2%; margin-left: 3%"
      placeholder="请输入古诗名字"
      clearable
      @input="handleInput"
      @clear="handleClear"
    />

    <!--展示栏-->
    <div class="show">
      <el-dropdown>
        <el-button type="primary">
          所有古诗名<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu style="max-height: 150px; overflow-y: auto">
            <el-dropdown-item v-for="(item, index) in poemsName" :key="index"  @click="selectPoem(item)">{{
              item
            }}</el-dropdown-item>
            <!-- 其他项目 -->
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
  
<script>
// import courseData from "@/assets/json/杜甫赏析最终版格式化.json";
import courseData from "@/assets/json/3改.json";
import data from "@/assets/json/杜甫诗词交互数据.json";
export default {
  name: "Searchs",
  data() {
    return {
      data,
      courseData,
      searchName: "",
      poemsName: [], //数据库里的古诗名字
    };
  },
  methods: {
    //搜古诗,把输入的内容传到actions里
    searchPoem() {
      if (this.searchName) {
        this.$store.dispatch("selectPoem", this.searchName);
      }
    },

    //用于地图!!!
    FindName(){
       if (this.searchName) {
        this.$store.dispatch("searchPoems", this.searchName);
      }
    },

    //合并两个actions
     searchPoemAndFindName() {
    this.searchPoem();
    this.FindName();
  },

    
    handleInput() {
      if (!this.searchName) {
        this.handleClear();
      }
    },
    handleClear() {
      this.$store.dispatch("resetSelection");
    },
      selectPoem(poemName) {
      this.searchName = poemName; // 将点击的古诗名设置为搜索栏的值
    },
  },
  mounted() {
    //提取所有古诗名字
    // 当组件挂载后，提取courseData中的title属性并存储到poemsName数组
    this.poemsName = this.courseData.map((item) => item.title);

  },
};
</script>

<style>
#search {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
.buttons {
  margin-left: 40%;
  margin-top: 1.4%;
}
.show {
  margin-top: 1.3%;
  margin-left: 3%;
  padding-right: 5%;
}

/* .input_content{
    margin-top:1.2%;
    margin-left: 3%;
    outline: none;
    padding: 1%;
    border: 1px solid #ccc;
    border-radius: 10px;  
    width: 15%;
    height: 8%;
} */
</style>
